<template>
	<view>
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
			:duration="500">
			<swiper-item class="swiper-item" v-for="(item,index) in info.avator.split(',')" :key="index">
				<image mode="aspectFill" :src="item"></image>
			</swiper-item>
		</swiper>
		<view class="infobox">
			<view class="namebox">{{info.name}}</view>
			<view class="age">
				<uni-rate allow-half :value="info.star" :readonly="true" size="18" />
				<view>教龄：{{parseInt(info.teacher_year)+1}}年</view>
			</view>
			<view class="specbox">
				<view class="specitem" v-for="(item,index) in info.label_list" :key="index">
					{{item.major_name}}
				</view>
			</view>
			
		</view>
		<view class="textbox" style="margin-top: 24rpx;">
			<view>教师简介</view>
		</view>
		<view style="width: 730rpx; margin: 0 auto;" v-html="info.content">
			
		</view>
		<view class="textbox" style="margin-top: 24rpx;">
			<view>老师评价({{info.count_eval||0}})</view>
			<view class="more" @click="more()">
				更多
				<image src="../../static/jt1.png"></image>
			</view>
		</view>
		<comment :list="info.teacher_eval"></comment>
		<view class="textbox" style="margin-top: 24rpx;">
			<view>课程</view>
		</view>
		<classlist :list="list"></classlist>
	</view>
</template>

<script>
	import comment from '../../components/teachercomment.vue'
	import classlist from '../../components/classlist.vue'
	export default {
		components:{
			classlist,comment
		},
		data() {
			return {
				id:'',
				info:{},
				list:[],
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getinfo()
		},
		methods: {
			getinfo(){
				this.$http({
					url:'/api/Activity/teacher_detail',
					data:{
						id:this.id
					}
				}).then(res=>{
					this.info = res.data
					this.info.teacher_eval = this.info.teacher_eval.splice(0,2)
					this.list = res.data.course
					this.info.content = this.$replace_Rich_text(info.content)
				})
			},
			onShareAppMessage(res) {
			  if (res.from === 'button') {// 来自页面内分享按钮
			      console.log(res.target)
			  }
			  // return {
			  //   title: "邀请好友",
			  //   path: '/pages/index/index?pid='+this.id
			  // }
			},
			onShareTimeline() {
			  return {
			    title: '快乐生活，就到众享幸福家',
			    path: "/pages/teacherinfo/teacherinfo?id="+this.id
			  }
			},
			more(){
				uni.navigateTo({
					url:'/pagemy/teachercomment/teachercomment?id='+this.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		width: 750rpx;
		height: 750rpx;
		background: #FFE1E1;
		.swiper-item {
			display: block;
			height: 750rpx;
			line-height: 300rpx;
			text-align: center;
			image{
				width: 750rpx;
				height: 750rpx;
			}
		}
	}
	.infobox{
		width: 690rpx;
		padding: 40rpx 30rpx;
		// height: 202rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		.namebox{
			font-size: 48rpx;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			color: #222222;
			margin-bottom: 10rpx;
		}
		.specbox{
			display: flex;
			align-items: center;
			margin: 24rpx 0 0 0;
			flex-wrap: wrap;
			
			.specitem{
				width: fit-content;
				height: 50rpx;
				background: linear-gradient(90deg, #FEF0E5 0%, #FFE0CD 100%);
				border-radius: 8rpx 26rpx 26rpx 26rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #A07150;
				padding: 0 16rpx;
				margin-right: 16rpx;
				margin-top: 10rpx;
			}
		}
		.age{
			font-size: 26rpx;
			color: #666666;
			display: flex;
			align-items: center;
			>view{
				margin-left: 20rpx;
			}
		}
	}
	.textbox{
		width: 690rpx;
		padding: 0 30rpx;
		height: 120rpx;
		line-height: 120rpx;
		font-size: 40rpx;
		font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
		font-weight: normal;
		color: #FF6178;
		background-color: #FFF;
		display: flex;
		justify-content: space-between;
		.more{
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #888888;
			image{
				width: 11rpx;
				height:19rpx;
				margin-left: 12rpx;
			}
		}
	}

</style>
